<template>
<app-layout>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            新闻红包
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">新闻红包</a></li>
            <li class="active">活动列表</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">活动列表</h3>
            </div>
            <div class="box-body">
                <el-table
                    ref="multipleTable"
                    :data="records"
                    tooltip-effect="dark"
                    stripe
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="id"
                    label="ID"
                    width="55">
                    </el-table-column>

                    <el-table-column
                    prop="uid"
                    label="用户id">
                    </el-table-column>

                    <el-table-column
                    prop="prize.name"
                    label="奖品">
                    </el-table-column>

                    <el-table-column
                    prop="volume_number"
                    label="兑换码">
                    </el-table-column>                                                       
                
                    <el-table-column
                    prop="msg"
                    label="说明">
                    </el-table-column>
                  

                </el-table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" class="pull-right">
                </el-pagination>            
            </div>
            <!-- /.box-footer-->
        </div>
        <!-- /.box -->
    </section>
    <!-- /.content -->
</app-layout>  
</template>

<script>
import * as API from "../../Consts/Api";
import Layout from "@/components/Layout";

export default {
  components: {
    "app-layout": Layout
  },
  data() {

    const end = new Date();
    const start = new Date();
    end.setTime(start.getTime() + 60 * 1000);

    return {    
      records: [],
      // 分页
      total: 0,
      size: 10,      
      currentPage: 1,
      // 多选
      multipleSelection: [],
    };
  },
  created: function() {
    this.loadData();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 分页
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(size) {
      this.size = size;
      this.loadData();
    },
    handleCurrentChange(page) {
      // console.log(`当前页: ${val}`);
      this.currentPage = page;
      this.loadData(page);
    },



    loadData(page) {
      const options = {
        params: {
          per_page: this.size,
          page: page >= 1 ? page : 1
        }
      };

      this.$http.get(API.RED_PACKET_RECORDS, options).then(response => {
        if (response.data.status == "no") {
          this.$message({
            message: response.data.message,
            type: "error",
            duration: 5000
          });
        } else {
          this.records = response.data.data;
          this.total = response.data.total;
        }
      });
    },   
  }
};
</script>